<template>
	<view class="container" style="background-color: white;">
		<!-- 导航栏 -->
		<uni-nav-bar dark :fixed="true" shadow background-color="#007AFF" status-bar left-icon="left" left-text="返回"
			titleStyle="{height: '52px'}" :title="title" @clickLeft="back">
			<block slot="right">
				<!-- <view class="city">
					<text>保存</text>
				</view>
				<view class="city">
					<text>提交</text>
				</view> -->
			</block>
		</uni-nav-bar>
		<view style="margin: 15px">
			<u-form :model="form" ref="uForm" label-position="top" label-width="150px">
				<u-divider text="合同基本信息"></u-divider>
				<u-form-item class="form-item" label="合同编号">
					<u-input placeholder="请输入内容" border="surround" v-model="formData.contractCode" :disabled="formDisabled" disabledColor="#ffffff">
					</u-input>
				</u-form-item>
				<u-form-item class="form-item" label="任务名义" @click="showAction('naming')">
					<u--input v-model="formData.naming" disabled disabledColor="#ffffff" placeholder="请选择,不能为空"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item class="form-item" label="检验类别" @click="showAction('inspectType')">
					<u--input v-model="formData.inspectType" disabled disabledColor="#ffffff" placeholder="请选择,不能为空"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item class="form-item" label="任务来源" @click="showAction('source')" v-if="formData.inspectType === '强制性认证检验'">
					<u--input v-model="formData.source" disabled disabledColor="#ffffff" placeholder="请选择,不能为空"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item class="form-item" label="设备数量" @click="showAction('num')">
					<u-number-box v-model="formData.num" :min="0" integer :disabled="formDisabled" disabledColor="#ffffff"></u-number-box>
				</u-form-item>
				<u-form-item class="form-item" label="受检产品型号">
					<u--input placeholder="请输入内容" border="surround" v-model="formData.productType" :disabled="formDisabled" disabledColor="#ffffff"
						></u--input>
				</u-form-item>
				<u-form-item class="form-item" label="受检单位">
					<u--input placeholder="请输入内容" border="surround" v-model="formData.inspectedDepName" :disabled="formDisabled" disabledColor="#ffffff"
						></u--input>
				</u-form-item>
				<u-form-item class="form-item" label="受检单位联系电话">
					<u--input placeholder="请输入内容" border="surround" v-model="formData.inspectedDepPhone" :disabled="formDisabled" disabledColor="#ffffff"
						>
					</u--input>
				</u-form-item>
				<u-form-item class="form-item" label="受检单位地址">
					<u--input placeholder="请输入内容" border="surround" v-model="formData.inspectedDepAddress" :disabled="formDisabled" disabledColor="#ffffff"
						></u--input>
				</u-form-item>
				<u-form-item class="form-item" label="当前设备序号">
					<u--input placeholder="请输入内容" border="surround" v-model="formData.currentNum" :disabled="formDisabled" disabledColor="#ffffff"
						></u--input>
				</u-form-item>
				<u-form-item class="form-item" label="设备总数">
					<u--input placeholder="请输入内容" border="surround" v-model="formData.countNum" :disabled="formDisabled" disabledColor="#ffffff"
						></u--input>
				</u-form-item>
				<u-form-item class="form-item" label="任务类型" @click="showAction('type')">
					<u--input v-model="formData.type" disabled disabledColor="#ffffff" placeholder="请选择,不能为空"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item class="form-item" label="限定完成日期" @click="showDatePicker('finishDate')">
					<u--input v-model="formData.finishDate" disabled disabledColor="#ffffff" placeholder="请选择,不能为空"
						border="none"></u--input>

					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item class="form-item" label="检验编号">
					<u-input placeholder="请输入内容" border="surround" v-model="formData.code" @change="change" :disabled="formDisabled" disabledColor="#ffffff"></u-input>
				</u-form-item>
				<!-- <u-form-item class="form-item" label="检验依据" @click="selectContractType">
					<u-checkbox-group v-model="formData.inspectStandards" placement="column"
						@change="(n)=>onFormCheckBoxValueChange('inspectStandards',n)">
						<u-checkbox :customStyle="{marginBottom: '8px'}"
							v-for="(item, index) in actionsDataSource.inspectStandards" :key="index" :label="item.name"
							:name="item.name">
						</u-checkbox>
					</u-checkbox-group>
				</u-form-item>
				<u-form-item class="form-item" label="自定义标准">
					<u-input placeholder="请输入内容" border="surround" v-model="formData.entrustCode" ></u-input>
				</u-form-item> -->
				<u-form-item class="form-item" label="委托书编码">
					<u-input placeholder="请输入内容" border="surround" v-model="formData.entrustCode" :disabled="formDisabled" disabledColor="#ffffff"></u-input>
				</u-form-item>
				<u-divider text="审核信息"></u-divider>
				<u-form-item class="form-item" label="审核结果">
					<u-radio-group v-model="formData.result" placement="column" @change="(n)=>onFormRadioValueChange('result',n)" :disabled="formDisabled" disabledColor="#ffffff">
						<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in actionsDataSource.result"
							:key="index" :label="item.name" :name="item.name">
						</u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item class="form-item" label="审核意见">
					<u--textarea v-model="formData.comment" placeholder="请输入审核内容" :disabled="formDisabled" disabledColor="#ffffff"></u--textarea>
				</u-form-item>
			</u-form>
			<u-divider text="任务流转记录"></u-divider>
			<view class="uni-contract-list" v-for="(record, index) in history" :key="index">
				<view class="uni-contract-list-cell">
					 <view class="uni-contract-list-body">
						<view class="uni-contract-list-item-content">
							<text class="uni-contract-list-item-content-step">
								<view>
									<span style="color:black">{{record.step}}</span></p>
									<span>{{comment || '无审核意见'}}</span>
								</view>
							</text>
						</view>
						<view class="uni-contract-list-item-extra">
							<text class="uni-contract-list-item-extra-text">
								<span>{{record.creatorName}} / {{record.createTime}}</span>
								</text>
								</view>
					</view>
				</view>
			</view>
		</view>

		<u-line :dashed="false" style="margin: -2px;"></u-line>
		<u-datetime-picker v-model="dpickervalue" :show="showDPicker" @confirm="onFormDatePickerValueChange" mode="date"
			:formatter="datepickerformatter" @close="showDPicker = false" @cancel="showDPicker = false">
		</u-datetime-picker>
		<u-action-sheet :show="showActionSheet" :actions="actions" @close="showActionSheet = false"
			@select="onFormActionsValueChange"></u-action-sheet>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '任务详情',
				actionType:0, //0 创建 1提交
				formData: {
					id: "",
					result:null,//审批结果，
					comment:""
				},
				showActionSheet: false,
				showDPicker: false,
				dpickervalue: Number(new Date()),
				curActionsKey: "", //当前正在操作的actions
				actions: [],
				curDatePcikerKey: "",
				history:[],
				actionsDataSource: {
					source: [{
							name: '横向委托',
							value: 1,
						},
						{
							name: '安标委托',
							value: 2,
						},
						{
							name: '监督抽查',
							value: 3,
						},
						{
							name: 'CQC委托',
							value: 4,
						},
						{
							name: '方圆委托',
							value: 5,
						},
						{
							name: '南阳委托',
							value: 6,
						},
						{
							name: '上海委托',
							value: 7,
						},
						{
							name: '天津委托',
							value: 8,
						}
					],
					naming: [{
							name: '国家有色冶金机电产品质量监督检测检验中心',
							value: 1,
						},
						{
							name: '国家安全生产长沙矿山机电检测检验中心',
							value: 2,
						},
						{
							name: '中国有色金属工业机电产品质量监督检测检验中心',
							value: 3,
						},
						{
							name: '湖南省有色冶金机械产品质量监督检测检验授权站',
							value: 4,
						}
					],
					inspectType: [{
							name: '一般委托检测检验',
							value: 1,
						},
						{
							name: '监督抽查检验',
							value: 2,
						},
						{
							name: '矿山在用设备检测检验',
							value: 3,
						},
						{
							name: '安标检验',
							value: 4,
						},
						{
							name: '防爆合格证检验',
							value: 5,
						},
						{
							name: '危险场所检测',
							value: 6,
						},
						{
							name: '强制性认证检验',
							value: 7,
						},
						{
							name: '检定',
							value: 8,
						},
						{
							name: '现场评审演示',
							value: 9,
						},
						{
							name: '质量监控',
							value: 10,
						},
					],
					type: [{
						name: '第一次检验',
						value: 1,
					},
					// {
					// 	name: '整改复检（F）',
					// 	value: 2,
					// }, {
					// 	name: '修改报告（G',
					// 	value: 3,
					// },
					],
					result: [{
						name: '批准',
						value: true,
					}, {
						name: '驳回申请',
						value: false,
					}, ],
					inspectStandards: [{
						name: '测试1',
						value: 1
					}, {
						name: '测试2',
						value: 2
					}, ]
				},

				tasks: [],
				formDisabled: false
			}
		},
		onLoad(options) {

			var this_ = this;
			if (options.action == 'create') {
				this.title = '创建任务'
			}
			this.formDisabled = options.edit == 'false'
			//拉取远程数据
			this_.loadmore()
		},
		methods: {
			showAction(actionkey) {
				this.curActionsKey = actionkey;
				this.actions = this.actionsDataSource[actionkey];
				this.showActionSheet = true;
			},
			showDatePicker(pickerkey) {
				this.curDatePcikerKey = pickerkey;
				this.showDPicker = true;
			},
			onFormInputValueChange(inputkey, value) {
				//表单Input类型通用修改
				this.formData[inputkey] = value;
			},
			onFormCheckBoxValueChange(checkboxkey, value) {
				//表单checkbox类型通用修改
				this.formData[checkboxkey] = value;
			},
			onFormActionsValueChange(option) {
				//表单actions类型通用修改
				this.formData[this.curActionsKey] = option.name;
				this.showActionSheet = false;
			},
			onFormDatePickerValueChange(option) {
				//表单datepicker类型通用修改
				this.formData[this.curActionsKey] = option.name;
				this.showActionSheet = false;

			},
			onFormRadioValueChange(radiokey,value) {
				//表单radio类型通用修改
				this.formData[radiokey] = value;
			},
			datepickerformatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				});
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			loadmore() {

				//创建任务自动带入合同相关信息
				var this_ = this;
				if (this_.options.contractId != null) {
					var params = {
						id: this_.options.contractId
					}
					//查询合同详情,自动带入合同相关信息
					this_.$u.api.contract.detail(params).then(res => {

						this_.formData.contractCode = res.data.code; //合同编码
						this_.formData.inspectedDepName = res.data.inspectedDepName; //合同编码
						this_.formData.inspectedDepPhone = res.data.phone; //合同编码
						this_.formData.inspectedDepAddress = res.data.inspectedDepAddress; //合同编码
					});
				}
				//有taskId，非创建任务流程
				if (this_.options.taskId != null) {
					var params = {
						id: this_.options.taskId
					}
					//查询任务信息
					this_.$u.api.task.detail(params).then(res => {
						this.formData = res.data;
					});

					//查询任务的历史流转信息
					this_.$u.api.task.history(params).then(res => {
						this.history = res.rows;
					});
				}
			},
			commit(){
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import 'detail.scss';

	page {
		background-color: #f5f5f5;
	}
</style>
